/**
 * loading 占位
 * 解决首次加载时白屏的问题
 */
(function () {
  const div = document.createElement("div");
  const body = document.querySelector("body");
  body.appendChild(div);
  div.setAttribute("id", "loading-app");
  if (div && div.innerHTML === "") {
    div.innerHTML = `
      <style>
        html,
        body,
        #loading-app {
          background: linear-gradient(to top, #08BFBE 0%, #A2C7F1 100%);
          height: 100%;
          margin: 0;
          padding: 0;
        }
        #loading-app {
          position: fixed;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          z-index: 9999;
          background-repeat: no-repeat;
          background-size: 100% auto;
          box-sizing: border-box;
        }

        .loading-title {
          line-height:20px;
          font-size: 20px;
          color:#fff;
          box-sizing: border-box;
        }

        .loading-sub-title {
          padding-top:15px;
          line-height:24px;
          font-size: 14px;
          color: #fff;
          box-sizing: border-box;
        }

        .page-loading-warp {
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 26px;
          box-sizing: border-box;
        }
        .ant-spin {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          width: 36px;
          height: 36px;
          border-radius: 50%;
          overflow: hidden;
          background: rgba(0, 0, 0, 0.3);
          box-sizing: border-box;
        }
   
        .ant-spin-inner {
          animation: spinner-loading 1s linear infinite;
          border: solid 4px transparent;
          border-top: solid 4px #fff;
          border-radius: 100%;
          width: 22px;
          height: 22px;
          box-sizing: border-box;
        }
  
        @keyframes spinner-loading {
          0% {
            transform: rotate(0deg);
          }
        
          50% {
            transform: rotate(120deg);
          }
        
          100% {
            transform: rotate(360deg);
          }
        }
        
      </style>

      <div style="
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100%; 
      ">
        <div class="page-loading-warp">
          <div class="ant-spin">
            <span class="ant-spin-inner">
            </span>
          </div>
        </div>
        <div class="loading-title">
          正在加载资源
        </div>
        <div class="loading-sub-title">
          初次加载资源可能需要较多时间 请耐心等待
        </div>
      </div>
    `;
  }
})();
